<template>
  <div class="addAddress">
    <Header :is-left="true" :title="title" />
    <!-- 添加地址 -->
    <div class="viewbody">
      <div class="content">
        <FormBlock
          v-model="addressInfo.name"
          label="联系人"
          placeholder="姓名"
          :tags="sexes"
          :sex="addressInfo.sex"
          @checkSex="checkSex"
        />
        <FormBlock v-model="addressInfo.phone" label="电话" placeholder="手机号码" />
        <FormBlock
          v-model="addressInfo.address"
          label="地址"
          placeholder="小区/写字楼/学校等"
          icon="angle-right"
          @click="showSearch=true"
        />
        <FormBlock
          v-model="addressInfo.address_detail"
          label="门牌号"
          placeholder="**号楼*单元***"
          icon="edit"
          textarea="textarea"
        />
        <div class="formblock">
          <div class="label-wrap">标签</div>
          <TabTag :tags="tags" :select-tag="addressInfo.tag" @checkTag="checkTag" />
        </div>
      </div>
      <!-- 确定按钮 -->
      <div class="form-button-wrap">
        <button class="form-button" @click="handleSave">确定</button>
      </div>
    </div>
    <!-- 搜索地址 -->
    <AddressSearch :show-search="showSearch" :address-info="addressInfo" @close="showSearch=false" />
  </div>
</template>

<script>
import Header from '../../components/Header'
import FormBlock from '../../components/Orders/FormBlock'
import TabTag from '../../components/Orders/TabTag'
import AddressSearch from '../../components/Orders/AddressSearch'
import { Toast } from 'vant'
export default {
  name: 'AddAddress',
  components: {
    Header,
    FormBlock,
    TabTag,
    AddressSearch
  },
  data() {
    return {
      title: '',
      id: '',
      sex: '',
      tags: ['家', '学校', '公司'],
      sexes: ['先生', '女士'],
      addressInfo: {},
      showSearch: false
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.addressInfo = to.params.addressInfo
      vm.title = to.params.title
      // vm.id= to.params.addressInfo.id
    })
  },

  methods: {
    // 随机数
    randoms(num = 4) {
      let a = ''
      while (num > 0) {
        a += Math.floor(Math.random() * 10)
        num--
      }
      return a
    },
    checkTag(item) {
      // console.log(item);
      this.addressInfo.tag = item
    },
    checkSex(item) {
      // console.log(item);
      this.addressInfo.sex = item
    },
    handleSave() {
      // console.log(this.addressInfo);
      if (!this.addressInfo.name) {
        this.showMsg('请输入联系人')
        return
      }

      if (!this.addressInfo.phone) {
        this.showMsg('请输入手机号')
        return
      } else if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.addressInfo.phone.trim()))) {
        this.showMsg('请输入正确手机号')
        return
      }

      if (!this.addressInfo.address) {
        this.showMsg('请输入收货地址')
        return
      }

      // 存储数据
      if (this.title === '添加地址') {
        this.addAddress() // 添加
        this.addressInfo.id = (new Date()).valueOf() + this.randoms()
        console.log(this.addressInfo.id)
      } else {
        this.editAddress() // 修改
        this.id = this.addressInfo.id
      }
    },
    showMsg(msg) {
      Toast({
        message: msg,
        position: 'bottom',
        duration: 2000
      })
    },
    addAddress() {
      // this.$axios
      //   .post(
      //     `/api/user/add_address/${localStorage.ele_login}`,
      //     this.addressInfo
      //   )
      //   .then(res => {
      //     if (!this.$store.getters.userInfo) {
      //       this.$store.dispatch("setUserInfo", this.addressInfo);
      //     }
      //     this.$router.push("myAddress");
      //   })
      //   .catch(err => console.log(err));
      //  if (!this.$store.getters.userInfo) {

      //   // this.$store.dispatch("setUserInfo", this.addressInfo);
      // }

      this.$store.commit('addAddress', this.addressInfo)
      Toast.success('添加成功')
      this.$router.push('myAddress')
    },
    editAddress() {
      // this.$axios
      //   .post(
      //     `/api/user/edit_address/${localStorage.ele_login}/${
      //       this.addressInfo._id
      //     }`,
      //     this.addressInfo
      //   )
      //   .then(res => {
      //     this.$router.push("/myAddress");
      //   });

      // Toast({
      //   message: '编辑成功',
      //   position: 'center',
      //   duration: 2000
      // })
      // console.log('id--', this.addressInfo)
      if (!this.addressInfo.id || this.addressInfo.id.length < 1) {
        this.addressInfo.id = (new Date()).valueOf() + this.randoms()
        console.log('id++', this.addressInfo.id)
      }
      this.$store.commit('editAddress', { id: this.addressInfo.id, arrayinfo: this.addressInfo })
      Toast.success('修改成功')
      this.$router.push('/myAddress')
    }
  }
}
</script>

<style scoped>
.addAddress {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 45px;
}
.viewbody {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.content {
  padding-left: 4vw;
  background: #fff;
  font-size: 0.94rem;
}

.formblock {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
}
.formblock .label-wrap {
  flex-basis: 17.333333vw;
  padding: 3.733333vw 0;
  line-height: 4.8vw;
  color: #333;
  font-weight: 700;
}

/* 确定按钮 */
.form-button-wrap {
  padding: 5.333333vw 4vw;
  display: flex;
}
.form-button-wrap .form-button {
  background: #00d762;
  text-align: center;
  border-radius: 0.533333vw;
  flex: 1;
  font-size: 1.1rem;
  line-height: 5.066667vw;
  color: #fff;
  padding: 3.333333vw 0;
  border: none;
  font-weight: 500;
}
</style>
